<template>
  <div>
    <!-- table -->
    <a-card style="overflow: scroll;">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="false"
        style="width:100%;"
        :loading="memberLoading"
      >
        <template slot="url" slot-scope="text">
          <div v-if="text">
            <a :href="text" target="_blank">{{ $t('verifyTask.cklj') }}</a>
          </div>
          <div v-else>
            {{ $t('verifyTask.zwlj') }}
          </div>
        </template>
        <template slot="shop" slot-scope="text">
          <div v-if="text">
            {{text.username}}
          </div>
          <div v-else>
            {{ $t('verifyTask.gly') }}
          </div>
        </template>
        <template slot="start_data" slot-scope="text, record">
          <template>
            <div v-if="record.task_proto.type == 1">
              <div>
                <dl>
                  <dt>{{ $t('verifyTask.kssj') }}</dt>
                  <dd v-if="record.start_data">
                    {{ $t('verifyTask.gz') }}: {{record.start_data.following_count}}
                    {{ $t('verifyTask.fs') }}: {{record.start_data.follower_count}}
                    {{ $t('verifyTask.hz') }}: {{record.start_data.total_favorited}}
                  </dd>
                </dl>
              </div>
              <div>
                <dl>
                  <dt>{{ $t('verifyTask.jssj') }}</dt>
                  <dd v-if="record.finish_data">
                    {{ $t('verifyTask.gz') }}: {{record.finish_data.following_count}}
                    {{ $t('verifyTask.fs') }}: {{record.finish_data.follower_count}}
                    {{ $t('verifyTask.hz') }}: {{record.finish_data.total_favorited}}
                  </dd>
                </dl>
              </div>
            </div>
          </template>
        </template>
        <template slot="imgs" slot-scope="text">
          <template>
            <div v-if="text">
              <img v-for="item in text.split(',')" @click="handleClickReview($hostServer+item)" class="table-img" :src="$hostServer+item" alt=""/>
            </div>
            <div v-else>-</div>
          </template>
        </template>
        <template slot="operation" slot-scope="text, record">
          <span>
            <a @click="handleClickVerify(record.id,true)">{{ $t('verifyTask.tg') }}</a>
            <a-divider type="vertical" />
            <a style="color:red;" @click="handleClickVerify(record.id,false)">{{ $t('verifyTask.jj') }}</a>
          </span>
        </template>
      </a-table>
    </a-card>
    <a-modal title="$t('verifyTask.jjyy')" v-model="showInputDialog" @ok="handleInputDialogOk">
      <p>
        <a-input v-model="refuse_content" placeholder="$t('verifyTask.qsr')..." />
      </p>
    </a-modal>
    <DialogImg :img_url="curr_img_url" :is_show="curr_img_show"/>
    <a-modal title="$t('verifyTask.cz')" v-model="dialogConfirm" @ok="handleClickConfirm">
      <div v-if="is_pass">
        {{ $t('verifyTask.jdfw') }}:
        <a-radio-group v-model="task_level">
          <a-radio-button value="0">{{ $t('verifyTask.syr') }}</a-radio-button>
          <a-radio-button v-for="item in vip_list" :value="item.level">{{item.name}}</a-radio-button>
        </a-radio-group>
      </div>
      <div v-else>
        <a-input v-model="reply" placeholder="$t('verifyTask.jjyy')" />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { mixin, mixinDevice } from '@/utils/mixin'
import DialogImg from '../../components/DialogImg'

export default {
  name: 'Task',
  mixins: [mixin, mixinDevice],
  components: {
    DialogImg
  },
  data () {
    return {
      curr_img_url: '',
      curr_img_show: false,
      description: this.$t('verifyTask.wxdyhswsks'),
      loading: false,
      memberLoading: false,
      curr_id: '',
      // table
      columns: [
        {
          title: this.$t('verifyTask.fbz'),
          dataIndex: 'shop',
          key: 'shop',
          scopedSlots: { customRender: 'shop' }
        },
        {
          title: this.$t('verifyTask.mc'),
          dataIndex: 'title',
          key: 'title',
          scopedSlots: { customRender: 'title' }
        },
        {
          title: this.$t('verifyTask.yq'),
          dataIndex: 'desc',
          key: 'desc',
          scopedSlots: { customRender: 'desc' }
        },
        {
          title: this.$t('verifyTask.bdzh'),
          dataIndex: 'post_username',
          key: 'post_username',
          scopedSlots: { customRender: 'post_username' }
        },
        {
          title: this.$t('verifyTask.lj'),
          dataIndex: 'url',
          key: 'url',
          scopedSlots: { customRender: 'url' }
        },
        {
          title: this.$t('verifyTask.sl'),
          dataIndex: 'cnt',
          key: 'cnt',
          scopedSlots: { customRender: 'content' }
        },
        {
          title: this.$t('verifyTask.dj'),
          dataIndex: 'single_reward',
          key: 'single_reward',
          scopedSlots: { customRender: 'single_reward' }
        },
        {
          title: this.$t('verifyTask.cz'),
          key: 'action',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      vip_list:[],
      task_level:'-1',
      data: [],
      errors: [],
      showInputDialog: false,
      refuse_content: '',
      is_pass:false,
      dialogConfirm: false,
      reply:''
    }
  },
  created () {
    this.getList()
    this.getVipList()
  },
  methods: {
    handleInputDialogOk () {
      this.showInputDialog = false
    },
    getList () {
      this.$http.get('/verify/task_list').then(res => {
        this.data = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyTask.sb'),
          description: err.message
        })
      })
    },
    getVipList () {
      this.$http.get('/member/card_list').then(res => {
        this.vip_list = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyTask.sb'),
          description: err.message
        })
      })
    },
    handleSubmit (e) {
      e.preventDefault()
    },
    handleClickVerify (id,status) {
      this.curr_id = id
      if(status){
        this.is_pass  = true
      } else{
        this.is_pass = false
      }
      this.dialogConfirm = true
    },
    handleClickVerifyFail (id) {
      this.curr_id = id
      this.showInputDialog = true
    },
    handleClickReview (url) {
      this.curr_img_url = url
      this.curr_img_show = !this.curr_img_show
    },
    handleClickConfirm(){
      this.dialogConfirm = false;
      if(this.is_pass){
        this.verifySucc({
          id:this.curr_id,
          level:this.task_level
        })
      } else{
        this.verifyFail({
          id:this.curr_id,
          content:this.reply
        })
      }
    },
    verifySucc(data){
      this.$http.post('/verify/task_success', this.$qs.stringify(data)).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('verifyTask.cg'),
            description: res.msg
          })
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('verifyTask.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyTask.sb'),
          description: err.message
        })
      })
    },
    verifyFail(data){
      this.$http.post('/verify/task_fail', this.$qs.stringify(data)).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('verifyTask.cg'),
            description: res.msg
          })
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('verifyTask.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyTask.sb'),
          description: err.message
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .table-img{
    max-width: 100px;
    max-height: 100px;
    margin-right:10px;
    margin-bottom:5px;
    border:thin dashed #ccc;
    padding:5px;
  }
  .card{
    margin-bottom: 24px;
  }
  .popover-wrapper {
    /deep/ .antd-pro-pages-forms-style-errorPopover .ant-popover-inner-content {
      min-width: 256px;
      max-height: 290px;
      padding: 0;
      overflow: auto;
    }
  }
  .antd-pro-pages-forms-style-errorIcon {
    user-select: none;
    margin-right: 24px;
    color: #f5222d;
    cursor: pointer;
    i {
          margin-right: 4px;
    }
  }
  .antd-pro-pages-forms-style-errorListItem {
    padding: 8px 16px;
    list-style: none;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all .3s;

    &:hover {
      background: #e6f7ff;
    }
    .antd-pro-pages-forms-style-errorIcon {
      float: left;
      margin-top: 4px;
      margin-right: 12px;
      padding-bottom: 22px;
      color: #f5222d;
    }
    .antd-pro-pages-forms-style-errorField {
      margin-top: 2px;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }
  }
</style>
